<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <style>
            body{
                background-color:paleturquoise;
            }

            button{
                border:0;
                width: 170px;
                height: 50px;
                background-color: orangered;
                color: white;
                font-size: 16px;
                border-radius: 6px;
                margin-bottom:10px
                
            }
        </style>
    </head>
    
    <body>
        <div style="margin-top:50px;"><h2>JS调用OC中的方法</h2></div>
        <button id="btn">访问OC图片</button>
        <button id="btn1">访问OC视频</button>
        <button id="btn2">调用OC微信支付</button>
        <button id="btn3">调用OC支付宝支付</button>
        <button id="btn4">微信授权登录</button>
        <button id="btn5">微信语音识别</button>
        <button id="btn6">录音上传</button>
        <p></p>
    </body>
    <script>
       // 这段代码是固定的，必须要放到js中
       function setupWebViewJavascriptBridge(callback) {
           //Android
           if (window.GCWebviewAndroidJSBridge) {
               callback(GCWebviewAndroidJSBridge)
           } else {
               document.addEventListener(
                                         'GCWebviewAndroidJSBridgeReady'
                                         , function() {
                                         callback(GCWebviewAndroidJSBridge)
                                         },
                                         false
                                         );
           }
           
           //iOS
           if (window.GCWebviewJSBridge) {
               return callback(GCWebviewJSBridge);
           }
           if (window.KBWVJSBCallBacks) {
               return window.KBWVJSBCallBacks.push(callback);
           }
           window.KBWVJSBCallBacks = [callback];
           var GCWVJSBIframe = document.createElement('iframe');
           GCWVJSBIframe.style.display = 'none';
           GCWVJSBIframe.src = 'gcwvjsbscheme://__GC_BRIDGE_LOADED__';
           document.documentElement.appendChild(GCWVJSBIframe);
           setTimeout(function() { document.documentElement.removeChild(GCWVJSBIframe) }, 0);
        }
    
        // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用
        setupWebViewJavascriptBridge(function(bridge) {

           /* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */

           // 获取用户信息
           bridge.registerHandler('getUserInfo', function(data, responseCallback) {
               console.log("OC中传递过来的参数:", data);
               // 把处理好的结果返回给OC
               responseCallback({"userID":"DX001", "userName":"旋之华", "age":"18", "otherName":"旋之华"})
           });

           //  弹框输出
           bridge.registerHandler('alertMessage', function(data, responseCallback) {
               alert(data);
           });

           //  动态跳转到京东商城
           bridge.registerHandler('pushToNewWebSite', function(data, responseCallback) {
               window.location.href = data.url;
           });

           bridge.registerHandler('insertImgToWebPage', function(data, responseCallback) {

                var img = document.createElement('img');
                img.src = data.url;
                img.width = 200;
                document.body.appendChild(img);

           });


           /* OC给JS提供公开的API, 在JS中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */
                                    
           // 调用OC中的打开相册方法
           document.getElementById('btn').onclick = function () {
               bridge.callHandler('openCamera', {'count':'10张'}, function responseCallback(responseData) {
                   console.log("OC中返回的参数:", responseData)
               });
           };
                                     
            document.getElementById('btn1').onclick = function () {
                bridge.callHandler('openVideo', {'count':'1'}, function responseCallback(responseData) {
                    console.log("OC中返回的参数:", responseData)
                });
            };
                                     


           document.getElementById('btn2').onclick = function () {
               bridge.callHandler('showSheet', {'type':'1','orderId':'5sxNE5I4Cacsp9idSA'}, function responseCallback(responseData) {
                   console.log("OC中返回的参数:", responseData)
                   alert(responseData['message']);
               });
           };
                                     
            document.getElementById('btn3').onclick = function () {
                bridge.callHandler('Alipay', {'type':'2','orderId':'58sZFMBqXqIsp9icSw'}, function responseCallback(responseData) {
                    console.log("OC中返回的参数:", responseData)
                    alert(responseData['message']);
                });
            };
                                     
            document.getElementById('btn4').onclick = function () {
                 bridge.callHandler('WXLogin', {'type':'2','orderId':'58sZFMBqXqIsp9icSw'}, function responseCallback(responseData) {
                    console.log("OC中返回的参数:", responseData)
                    alert(responseData['message']);
                });
            };
                                     
            document.getElementById('btn5').onclick = function () {
                  bridge.callHandler('WXVoice', {'type':'2','orderId':'58sZFMBqXqIsp9icSw'},function responseCallback(responseData) {
                    console.log("OC中返回的参数:", responseData)
                    alert(responseData['message']);
                });
             };
                                     
            document.getElementById('btn6').onclick = function () {
                    bridge.callHandler('Sound', {},function responseCallback(responseData) {
                        console.log("OC中返回的参数:", responseData)
                        alert(responseData['message']);
                });
            };
        })
    </script>
</html>
